<template>
  <div class="home"  ref="home">
    <div>
      <div class="header-container">
        <home-header/>
      </div>
      <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content">
          <home-banner :info="swiperList"/>
          <home-icon :info="iconList"/>
          <home-recommend :info="recommendList"/>
          <home-weekend :info="weekendList"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import homeHeader from './header'
import homeBanner from './banner'
import homeIcon from './icon'
import homeWeekend from './weekend'
import homeRecommend from './recommend'
import Bscroll from 'better-scroll'
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'home',
  components: {
    homeHeader,
    homeBanner,
    homeIcon,
    homeWeekend,
    homeRecommend
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new Bscroll(this.$refs.scroll, { click: true })
      console.log(this.scroll)
    })
  },
  data () {
    return {
      iconList: [],
      recommendList: [],
      swiperList: [],
      weekendList: [],
      lastCity: ''
    }
  },
  computed: {
    ...mapState({ city: 'city' })
  },
  activated () {
    console.log('lastcity', this.lastCity, 'city', this.city)
    if (this.city !== this.lastCity) {
      this.lastCity = this.city
      this.getInfo(`/api/static/mock/index.json?city=${this.city}`)
    }
  },
  created () {
    this.getInfo(`/api/static/mock/index.json?city=${this.city}`).then(
      data => {
        this.data = data
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.swiperList = data.swiperList
        this.weekendList = data.weekendList
      }
    )
  },
  methods: {
    getInfo (url) { // 获取首页数据
      return axios.get(url)
        .then(res => {
          if (res.data.ret) {
            return res.data.data
          }
          // console.log(this.info)
        }).catch(err => {
          console.log('err', err)
        })
    }
  }
}
</script>
<style lang="stylus" scoped>
// .home
//   width 100%
//   height 100%
  .scroll-wrapper
    height 100%
    width 100%
    position absolute
    left 0
    top 0
    bottom 0
    // overflow hidden
    // overflow hidden
  .header-container
    position absolute
    top 0
    left 0
    width 100%
    z-index 30
</style>
